<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能联系人提取器</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <div class="container mx-auto px-4 py-6 max-w-4xl">
        <!-- 标题 -->
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">智能联系人提取器</h1>
            <p class="text-gray-600">将自我介绍转换为手机通讯录格式</p>
        </div>

        <!-- 导航标签 -->
        <div class="bg-white rounded-lg shadow-lg mb-6">
            <div class="flex border-b">
                <button
                    id="mainTab"
                    class="flex-1 py-3 px-6 text-center font-medium bg-blue-500 text-white border-b-2 border-blue-500"
                    onclick="showTab('main')"
                >
                    <svg class="inline mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    主页面
                </button>
                <button
                    id="settingsTab"
                    class="flex-1 py-3 px-6 text-center font-medium text-gray-600 hover:text-gray-800"
                    onclick="showTab('settings')"
                >
                    <svg class="inline mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    设置
                </button>
            </div>

            <!-- 主页面内容 -->
            <div id="mainContent" class="p-6">
                <!-- 文本输入区域 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        输入自我介绍文本
                    </label>
                    <div class="relative">
                        <textarea
                            id="inputText"
                            placeholder="例如：王老师好，我是xx大学理学院的张三，我的手机号是13900000000，邮箱是zhangsan@example.com，我主要从事人工智能方面的研究，我的导师是李四。"
                            class="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                        ></textarea>
                        <button
                            onclick="pasteText()"
                            class="absolute top-2 right-2 p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded"
                            title="从剪贴板粘贴"
                        >
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- 分析按钮 -->
                <div class="mb-6">
                    <button
                        id="analyzeBtn"
                        onclick="analyzeText()"
                        class="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white py-3 px-6 rounded-lg font-medium transition-colors"
                    >
                        🤖 智能分析
                    </button>
                </div>

                <!-- 分析结果 -->
                <div id="resultSection" class="hidden bg-gray-50 rounded-lg p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">提取结果</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            <span class="text-sm text-gray-600">姓名：</span>
                            <span id="resultName" class="ml-2 font-medium">未找到</span>
                        </div>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                            </svg>
                            <span class="text-sm text-gray-600">电话：</span>
                            <span id="resultPhone" class="ml-2 font-medium">未找到</span>
                        </div>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                            <span class="text-sm text-gray-600">邮箱：</span>
                            <span id="resultEmail" class="ml-2 font-medium">未找到</span>
                        </div>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                            <span class="text-sm text-gray-600">单位：</span>
                            <span id="resultOrg" class="ml-2 font-medium">未找到</span>
                        </div>
                    </div>
                    <div id="resultNotesContainer" class="mt-4 hidden">
                        <span class="text-sm text-gray-600">备注：</span>
                        <p id="resultNotes" class="mt-1 text-gray-800"></p>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div id="actionButtons" class="hidden flex gap-4">
                    <button
                        onclick="insertToContacts()"
                        class="flex-1 bg-green-500 hover:bg-green-600 text-white py-3 px-6 rounded-lg font-medium transition-colors flex items-center justify-center"
                    >
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                        插入通讯录
                    </button>
                    <button
                        onclick="downloadVCard()"
                        class="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-3 px-6 rounded-lg font-medium transition-colors flex items-center justify-center"
                    >
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        下载vCard
                    </button>
                </div>
            </div>

            <!-- 设置页面内容 -->
            <div id="settingsContent" class="p-6 hidden">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">API设置</h3>
                
                <!-- API选择 -->
                <div class="mb-6">
                    <label class="flex items-center mb-2">
                        <input type="radio" name="apiType" id="useClaudeAPI" checked class="mr-2">
                        <span>使用Claude API（推荐）</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="apiType" id="useCustomAPI" class="mr-2">
                        <span>使用自定义API（OpenRouter/OpenAI兼容）</span>
                    </label>
                </div>

                <!-- Claude API设置 -->
                <div id="claudeAPISettings" class="space-y-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Claude API密钥
                        </label>
                        <input
                            type="password"
                            id="claudeApiKey"
                            placeholder="输入您的Claude API密钥"
                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                        <p class="text-xs text-gray-500 mt-1">请在 <a href="https://console.anthropic.com" target="_blank" class="text-blue-500 hover:underline">Anthropic Console</a> 获取API密钥</p>
                    </div>
                </div>

                <!-- 自定义API设置 -->
                <div id="customAPISettings" class="hidden space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            API端点
                        </label>
                        <input
                            type="text"
                            id="customEndpoint"
                            placeholder="例如：https://openrouter.ai/api/v1/chat/completions"
                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            模型名称
                        </label>
                        <input
                            type="text"
                            id="customModel"
                            placeholder="例如：anthropic/claude-3-sonnet"
                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            API密钥
                        </label>
                        <input
                            type="password"
                            id="customApiKey"
                            placeholder="输入您的API密钥"
                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                    </div>
                </div>

                <!-- 使用说明 -->
                <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                    <h4 class="font-medium text-blue-800 mb-2">使用说明</h4>
                    <ul class="text-sm text-blue-700 space-y-1">
                        <li>• 使用Claude API需要在Anthropic Console申请API密钥</li>
                        <li>• 如需使用其他API，请选择"自定义API"并填写相关信息</li>
                        <li>• 支持OpenRouter、OpenAI及其他兼容API</li>
                        <li>• API配置在当前会话中有效，不会保存到服务器</li>
                    </ul>
                </div>

                <!-- 开发者信息 -->
                <div class="mt-6 pt-4 border-t border-gray-200">
                    <p class="text-xs text-gray-400 text-center">
                        开发者：请在此处填写您的名字 | 联系邮箱：your.email@example.com
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let extractedInfo = null;

        // 标签页切换
        function showTab(tab) {
            const mainContent = document.getElementById('mainContent');
            const settingsContent = document.getElementById('settingsContent');
            const mainTab = document.getElementById('mainTab');
            const settingsTab = document.getElementById('settingsTab');

            if (tab === 'main') {
                mainContent.classList.remove('hidden');
                settingsContent.classList.add('hidden');
                mainTab.className = 'flex-1 py-3 px-6 text-center font-medium bg-blue-500 text-white border-b-2 border-blue-500';
                settingsTab.className = 'flex-1 py-3 px-6 text-center font-medium text-gray-600 hover:text-gray-800';
            } else {
                mainContent.classList.add('hidden');
                settingsContent.classList.remove('hidden');
                mainTab.className = 'flex-1 py-3 px-6 text-center font-medium text-gray-600 hover:text-gray-800';
                settingsTab.className = 'flex-1 py-3 px-6 text-center font-medium bg-blue-500 text-white border-b-2 border-blue-500';
            }
        }

        // 粘贴功能
        async function pasteText() {
            try {
                const text = await navigator.clipboard.readText();
                document.getElementById('inputText').value = text;
            } catch (err) {
                alert('无法访问剪贴板，请手动粘贴内容');
            }
        }

        // 分析文本
        async function analyzeText() {
            const inputText = document.getElementById('inputText').value.trim();
            if (!inputText) {
                alert('请先输入文本内容');
                return;
            }

            const analyzeBtn = document.getElementById('analyzeBtn');
            analyzeBtn.disabled = true;
            analyzeBtn.textContent = '分析中...';

            try {
                const useClaudeAPI = document.getElementById('useClaudeAPI').checked;
                let response;

                const prompt = `请分析以下自我介绍文本，提取联系人信息。注意：请准确识别真实姓名，不要把称呼（如"王老师"、"您好"等）误认为姓名。

文本内容：
"${inputText}"

请以JSON格式返回提取的信息，格式如下：
{
  "name": "真实姓名（如张三，不是王老师等称呼）",
  "phone": "电话号码",
  "email": "电子邮箱",
  "organization": "单位/公司/学校",
  "notes": "其他信息（如研究方向、职位、导师等）"
}

如果某个字段没有找到，请设置为空字符串。确保返回的是有效的JSON格式。`;

                if (useClaudeAPI) {
                    const claudeApiKey = document.getElementById('claudeApiKey').value;
                    if (!claudeApiKey) {
                        throw new Error('请填写Claude API密钥');
                    }

                    const apiResponse = await fetch('https://api.anthropic.com/v1/messages', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'x-api-key': claudeApiKey,
                            'anthropic-version': '2023-06-01'
                        },
                        body: JSON.stringify({
                            model: 'claude-3-sonnet-20240229',
                            max_tokens: 1000,
                            messages: [{
                                role: 'user',
                                content: prompt
                            }]
                        })
                    });

                    if (!apiResponse.ok) {
                        throw new Error(`Claude API请求失败: ${apiResponse.status} ${apiResponse.statusText}`);
                    }

                    const data = await apiResponse.json();
                    response = data.content[0].text;
                } else {
                    const endpoint = document.getElementById('customEndpoint').value;
                    const model = document.getElementById('customModel').value;
                    const apiKey = document.getElementById('customApiKey').value;

                    if (!endpoint || !model || !apiKey) {
                        throw new Error('请完整填写自定义API配置');
                    }

                    const apiResponse = await fetch(endpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${apiKey}`
                        },
                        body: JSON.stringify({
                            model: model,
                            messages: [{
                                role: 'user',
                                content: prompt
                            }],
                            temperature: 0.1
                        })
                    });

                    if (!apiResponse.ok) {
                        throw new Error(`API请求失败: ${apiResponse.status} ${apiResponse.statusText}`);
                    }

                    const data = await apiResponse.json();
                    response = data.choices[0].message.content;
                }

                // 解析JSON响应
                const jsonMatch = response.match(/\{[\s\S]*\}/);
                if (jsonMatch) {
                    extractedInfo = JSON.parse(jsonMatch[0]);
                    displayResults(extractedInfo);
                } else {
                    throw new Error('无法解析LLM响应');
                }
            } catch (error) {
                console.error('分析失败:', error);
                alert('分析失败：' + error.message);
            } finally {
                analyzeBtn.disabled = false;
                analyzeBtn.textContent = '🤖 智能分析';
            }
        }

        // 显示结果
        function displayResults(info) {
            document.getElementById('resultName').textContent = info.name || '未找到';
            document.getElementById('resultPhone').textContent = info.phone || '未找到';
            document.getElementById('resultEmail').textContent = info.email || '未找到';
            document.getElementById('resultOrg').textContent = info.organization || '未找到';

            const notesContainer = document.getElementById('resultNotesContainer');
            const notes = document.getElementById('resultNotes');
            if (info.notes) {
                notes.textContent = info.notes;
                notesContainer.classList.remove('hidden');
            } else {
                notesContainer.classList.add('hidden');
            }

            document.getElementById('resultSection').classList.remove('hidden');
            document.getElementById('actionButtons').classList.remove('hidden');
        }

        // 生成vCard
        function generateVCard(info) {
            const vcard = [
                'BEGIN:VCARD',
                'VERSION:3.0',
                `FN:${info.name}`,
                `N:${info.name};;;;`,
                info.phone ? `TEL:${info.phone}` : '',
                info.email ? `EMAIL:${info.email}` : '',
                info.organization ? `ORG:${info.organization}` : '',
                info.notes ? `NOTE:${info.notes}` : '',
                'END:VCARD'
            ].filter(line => line).join('\n');
            
            return vcard;
        }

        // 下载vCard文件
        function downloadVCard() {
            if (!extractedInfo) return;
            
            const vcard = generateVCard(extractedInfo);
            const blob = new Blob([vcard], { type: 'text/vcard' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${extractedInfo.name || 'contact'}.vcf`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 插入通讯录
        function insertToContacts() {
            const userAgent = navigator.userAgent;
            const isIOS = /iPad|iPhone|iPod/.test(userAgent);
            const isAndroid = /Android/.test(userAgent);
            
            downloadVCard();
            
            if (isIOS) {
                alert('已为iOS设备生成联系人文件，请在下载完成后打开.vcf文件导入到通讯录');
            } else if (isAndroid) {
                alert('已为Android设备生成联系人文件，请在下载完成后打开.vcf文件导入到通讯录');
            } else {
                alert('检测到桌面设备，已下载vCard文件，您可以手动导入到通讯录中');
            }
        }

        // API类型切换
        document.getElementById('useClaudeAPI').addEventListener('change', function() {
            if (this.checked) {
                document.getElementById('claudeAPISettings').classList.remove('hidden');
                document.getElementById('customAPISettings').classList.add('hidden');
            }
        });

        document.getElementById('useCustomAPI').addEventListener('change', function() {
            if (this.checked) {
                document.getElementById('claudeAPISettings').classList.add('hidden');
                document.getElementById('customAPISettings').classList.remove('hidden');
            }
        });
    </script>
</body>
</html>